<template>
    <div>
        <Header></Header>
        <div class="a">
         <router-link to="/archives">archives &nbsp</router-link>
          <router-link to="/categories">categories &nbsp</router-link>
         <router-link to="/tags">tags &nbsp</router-link>
           <router-link to="/index">index &nbsp</router-link>
           </div>
        <div class="block">
            <div >
            <el-row type="flex" justify="center"> 
                <el-col :span=14>
                <el-col
                    v-for="(item, index) in articleList"
                    :span="6"
                    :key="index"
                    style="margin:10px"
                >
                    <el-card :body-style="{ padding: '0px' }">
                        <img :src="item.articlePicUrl" class="image" />
                        <div style="padding: 14px;">
                            <span>{{item.title | ellipsis}}</span>
                            <!-- <span class="ellipsis">{{item.title}}</span> -->
                            <div class="bottom clearfix">
                                <time class="time">{{item.created}}</time>
                                <el-button
                                    type="text"
                                    class="button"
                                    @click="blogDetail(item.articleId)"
                                >文章详情</el-button>
                            </div>
                        </div>
                    </el-card>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        </div>
 <el-pagination
                style="margin-top: 20px;text-align: center"
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pagesize"
                @current-change="page">
        </el-pagination>
      
    </div>
</template>

<script>
import Header from './component/Header';
export default {
    name: 'Index',
    components: { Header },
    data() {
        return {
            currentDate: new Date(),
            articleList: [],
            total: '',
            pagesize: ''
        };
    },
    filters: {
		ellipsis (value) {
		let len=value.length;
		if (!value) return ''
		if (value.length > 20) {
			return value.substring(0,16) + '...'
		}
		return value
		}
	},
    created() {
        const _this = this;
        this.$axios.get('http://39.106.115.234:8083/articles/1').then((res) => {
            // console.log(res.data)
            _this.articleList = res.data.data.list;
            // console.log(res.data.data.total)
            // console.log(res.data.data.pageSize)
            _this.total = res.data.data.total;
            _this.pagesize = res.data.data.pageSize;
        });
    },
    methods: {
        page(currentPage) {
            // alert(currentPage)
            const _this = this;
            this.$axios.get('http://39.106.115.234:8083/articles/' + currentPage).then((res) => {
                console.log(res.data);
                _this.articleList = res.data.data.list;
            });
        },
        blogDetail(articleId) {
            this.$router.push({ name: 'BlogDetail', params: { articleId: articleId } });
        }
    }
};
</script>
<style>
.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
} 
.ellipsis {
      width: 100px;
      height: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }


.image {
    width: 300px;
    height: 200px;
    
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}


</style>



